// 首页
.orico_Page_index {
    width: 100%;
    position: relative;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f2f2f2;
    .pageMain {
        width: 100%;
        position: relative;
        .bannerswiper {
            width: 100%;
            height: auto;
            position: relative;
            .swiper-slide img {
                width: 100%;
                height: 100%;
            }
            .swiper-button-next {
                right: 9%;
                top: 53%;
            }
            .swiper-button-prev {
                left: 9%;
                top: 53%;
            }
            .swiper-horizontal > .swiper-pagination-bullets,
            .swiper-pagination-bullets.swiper-pagination-horizontal {
                bottom: 5%;
            }
            .swiper-button-next,
            .swiper-button-prev {
                color: #fff;
            }
            .swiper-pagination-bullet-active {
                width: 1.5rem !important;
                border-radius: 10px;
                color: #ffffff !important;
                background-color: #ffffff !important;
            }
        }
        .catMain {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            height: 14.375rem;
            background: #fff;
            .catit {
                min-width: 15%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .catIcoImg {
                    height: 4.6875rem;
                    width: 4.6875rem;
                }
                .catName {
                    padding-top: 1rem;
                    font-size: 1rem;
                    font-weight: bold;
                }
            }
        }
        .featuredtopicsMain {
            width: 100%;
            position: relative;
            margin-top: 24px;
            overflow: hidden;
            padding-top: 3vw;
            display: flex;
            justify-content: center;
            .ftcontent {
                width: 85%;
                display: flex;
                flex-direction: column;
                .ftItme {
                    width: 100%;
                    max-height: 30rem;
                    display: flex;
                    flex-direction: row;
                    background: #fff;
                    justify-content: space-between;
                    border-radius: 1.625rem;
                    margin-bottom: 1.5rem;
                    overflow: hidden;
                    .ftItme_left {
                        width: 53%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        text-align: center;
                        align-items: center;
                        p {
                            font-size: 2.625rem;
                            line-height: 2.8125rem;
                            font-weight: 600;
                            height: 5.9375rem;
                        }
                        .subtitle {
                            font-size: 1.125rem;
                            font-weight: 600;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            .tpicture {
                                width: 1.375rem;
                                height: 1.375rem;
                                background: url('../indeximg/more2.png') no-repeat;
                                background-position: -26px 0px;
                                margin-left: 1.625rem;
                            }
                        }
                        .subtitle:hover {
                            color: #004bfa;
                            .tpicture {
                                background-position: 0 0;
                            }
                        }
                    }
                    .ftItme_right {
                        width: 47%;
                        overflow: hidden;
                        position: relative;
                        img {
                            width: 100%;
                            transition: transform 0.3s ease-in-out;
                            border-start-end-radius: 1.625rem;
                            border-end-end-radius: 1.625rem;
                        }
                        img:hover {
                            transform: scale(1.09);
                        }
                    }
                }
                .ftItme:nth-child(even) {
                    .ftItme_right {
                        img {
                            border-start-end-radius: 0;
                            border-end-end-radius: 0;
                            border-start-start-radius: 1.625rem;
                            border-end-start-radius: 1.625rem;
                        }
                    }
                }
            }
        }
        .featuredProducts {
            position: relative;
            .biaoti {
                font-size: 2rem;
                font-weight: 600;
                line-height: 6rem;
                margin-top: 42px;
                margin-bottom: 14px;
                width: 85%;
                margin: 0 auto;
            }
            .fpSwiper {
                width: 116%;
                margin-left: 6%;
                position: relative;
                .swiper-wrapper {
                    .picture {
                        display: block;
                        width: 21.875rem;
                        height: 29.375rem;
                        background: #ffffff;
                        border-radius: 1.625rem;
                        text-align: center;
                        font-size: 1.125rem;
                        display: flex;
                        flex-direction: column;
                        .primg {
                            width: 13.5rem;
                            height: 12.875rem;
                            display: block;
                            position: absolute;
                            left: 50%;
                            top: 30%;
                            margin-left: -6.75rem;
                            margin-top: -6.4375rem;
                            background-repeat: no-repeat;
                            transition: transform 0.3s ease-in-out;
                            img {
                                width: 13.5rem;
                                height: 12.875rem;
                            }
                            img:hover {
                                transform: scale(1.1);
                            }
                        }
                        .fpptitle {
                            font-size: 1.25rem;
                            text-align: center;
                            line-height: 1.5rem;
                            font-weight: 700;
                            margin-top: 18rem;
                            padding: 0 1.875rem;
                            max-height: 3.0625rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .subtitle {
                            text-align: center;
                            line-height: 1.125rem;
                            font-size: medium;
                            width: 80%;
                            margin: auto;
                            margin-top: 1rem;
                            margin-bottom: 1.25rem;
                            max-height: 33px;
                            overflow: hidden;
                            font-weight: 600;
                        }
                        .more {
                            font-size: 0.8rem;
                            position: absolute;
                            bottom: 10%;
                            left: 50%;
                            color: #004bfa;
                            margin-left: -40px;
                            font-weight: 600;
                        }
                    }
                }
                .swiperasd {
                    display: flex;
                    width: 85%;
                    position: relative;
                    height: 6.25rem;
                    .swiper-container1 {
                        width: 85%;
                        .swiper-pagination-progressbar {
                            .swiper-pagination-progressbar-fill {
                                background-color: #555 !important;
                                margin-top: 0px;
                                height: 2px !important;
                            }
                        }
                        .slideshow-pag {
                            width: 86%;
                            right: 3%;
                            top: 50%;
                            height: 1px;
                        }
                    }
                    .swi1 {
                        width: 15%;
                        margin: 0;
                        position: relative;
                        overflow: hidden;
                        list-style: none;
                        padding: 0;
                        z-index: 1;
                        .slideshow-btn {
                            height: 2.5rem;
                            width: 2.5rem;
                        }
                        .swiper-button-next,
                        .swiper-rtl .swiper-button-prev {
                            position: static !important;
                            margin-left: 95px;
                            margin-top: 24px;
                        }
                        .swiper-button-prev,
                        .swiper-rtl .swiper-button-next {
                            position: static !important;
                            margin-left: 40px;
                            margin-top: -40px;
                        }
                    }
                }
            }
        }
        .hotProduct {
            position: relative;
            margin: 0 auto;
            .hotvideo {
                width: 100%;
                height: 50rem;
                overflow: hidden;
                transform-origin: center center;
                transform: scale(1);
                transition: transform 0.3s ease-in-out;
                background-size: 100% 100%;
                background-position: center center;
                animation: breath 4s linear infinite;
                display: none;
            }
            .hotImg {
                position: relative;
                width: 100%;
                height: 100%;
            }
        }
        .sceneIntroduction {
            width: 100%;
            background: #fff;
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 1%;
            overflow: hidden;
            .sceneitem {
                overflow: hidden;
                width: 49.5%;
                display: block;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 34rem;
                margin-bottom: 1%;
                .sceneInfo {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .scenetitle {
                        font-size: 1.875rem;
                        text-align: center;
                        font-weight: bold;
                        max-height: 5.5rem;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        padding-top: 10%;
                        z-index: 10;
                    }
                    .subtitle {
                        font-size: 1rem;
                        text-align: center;
                        line-height: 1.4em;
                        margin-top: 0.3125rem;
                        max-height: 1.5rem;
                        z-index: 999;
                        overflow: hidden;
                        display: -webkit-box;
                        margin-bottom: 0.3125rem;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        z-index: 10;
                    }
                    .sceneMore {
                        font-size: 1rem;
                        color: #004bfa;
                        text-align: center;
                        z-index: 10;
                    }
                }
                .sceneimg {
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    z-index: -1;
                    background-size: 100% 100%;
                    z-index: 9;
                }
                .sceneimg:hover {
                    transform: scale(1.09);
                    /* background-size: auto 120%; */
                }
            }
        }
        .oricoTechnology {
            display: flex;
            flex-direction: column;
            position: relative;
            padding-top: 6rem;
            padding-bottom: 1.25rem;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding-bottom: 120px;
            background: #fff;
            .ottitle {
                font-weight: 700;
                font-size: 3.5rem;
            }
            .otsbtitle {
                font-weight: 400;
                font-size: 1.375rem;
                padding-top: 1.25rem;
                padding-bottom: 5rem;
                width: 30%;
                margin: 0 auto;
            }
            .beforeafter {
                width: 85%;
                margin: 0 auto;
                height: 53.75rem;
                position: relative;
                border-radius: 1.75rem;
            }

            #after {
                position: absolute;
                top: 0px;
                left: 0px;
                background-image: url('../indeximg/indeximg1.jpg');
                width: 100%;
                height: 53.75rem;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 1.75rem;
            }

            #before {
                position: absolute;
                top: 0px;
                left: 0px;
                border-right: 0.25rem solid #ffffff80;
                background-image: url('../indeximg/indeximg2.jpg');
                width: 50%;
                height: 53.75rem;
                background-repeat: no-repeat;
                background-size: cover;
                border-start-start-radius: 1.75rem;
                border-end-start-radius: 1.75rem;
            }
            .drag-circle {
                left: 50%;
                transform: translateY(-50%);
                position: absolute;
                top: 50%;
                width: 48px;
                height: 48px;
                margin: -24px 0 0 -24px;
                content: '';
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff url('../indeximg/ba-arrow.png') center center / 22px 22px no-repeat;
                border: 1px solid #fff;
                border-radius: 50%;
                transition: all 0.3s ease;
                transform: scale(1);
                z-index: 5;
            }
        }
        .brandStory {
            padding: 0 7%;
            position: relative;
            margin: 0 auto;
            background: #fff;
            .brandStoryswiper {
                padding-bottom: 1.25rem;
            }
            .swiper-wrapper {
                position: relative;
            }
            .swiper-wrapper .bsitem {
                display: flex;
                width: 100%;
                height: 43.75rem;
                background: #ffffff;
                border-radius: 26px 26px 26px 26px;
                text-align: center;
                .itmImg {
                    width: 50%;
                    text-align: left;
                    border-radius: 1.625rem;
                    height: 42.625rem;
                    transition: transform 0.3s ease-in-out;
                    .bsImg {
                        margin-left: 1%;
                        border-radius: 26px 26px 26px 26px;
                        width: 98%;
                        height: 41.625rem;
                    }
                }
                .bsinf {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 10%;
                    justify-content: center;
                    .bstitle {
                        font-size: 3rem;
                        text-align: left;
                        line-height: 4rem;
                        font-weight: bolder;
                    }
                    .bssubtitle {
                        font-size: 1.25rem;
                        text-align: left;
                        line-height: 1.575rem;
                        width: 80%;
                        margin-bottom: 5%;
                        margin-top: 1.25rem;
                    }
                    .bsmore {
                        font-size: 1rem;
                        text-align: left;
                        width: 80%;
                        font-family: Montserrat !important;
                        color: #004bfa;
                    }
                }
            }
            .bs_swiperasd {
                position: relative;
                height: 6.25rem;
                display: flex;
                .bs_swcontainer {
                    width: 85%;
                    hr {
                        z-index: -1;
                        width: 85%;
                        position: absolute;
                        top: 2.6875rem;
                        left: 1rem;
                        height: 0;
                        color: inherit;
                        border-top-width: 1px;
                    }
                    .bs_pagination {
                        bottom: 3rem;
                        width: 86%;
                        .swiper-pagination-bullet {
                            margin-right: 28%;
                            width: 1.25rem;
                            height: 1.25rem;
                            border-radius: 50%;
                            background-color: #fff;
                            cursor: pointer;
                            opacity: 1;
                            border: 1px solid #cccccc;
                            float: left;
                        }
                        .swiper-pagination-bullet-active {
                            background-color: #000;
                        }
                    }
                    span {
                        font-weight: bold;
                    }
                    .time1 {
                        position: absolute;
                        top: 3.4375rem;
                        left: 0.2%;
                        height: 2px;
                    }
                    .time2 {
                        position: absolute;
                        top: 3.4375rem;
                        left: 25.3%;
                        height: 2px;
                    }
                    .time3 {
                        position: absolute;
                        top: 3.4375rem;
                        left: 51%;
                        height: 2px;
                    }
                    .swiper-container {
                        width: 15%;
                    }
                }
                .bs_bts {
                    width: 15%;
                    .slideshow-btn {
                        z-index: 9999;
                        width: 2.5rem;
                        height: 2.5rem;
                    }
                    .swiper-button-next {
                        position: static;
                        margin-left: 5.9375rem;
                        margin-top: 1.5rem;
                    }
                    .swiper-button-prev {
                        position: static;
                        margin-left: 2.5rem;
                        margin-top: -2.5rem;
                    }
                }
            }
        }
        .oricoDataStatistics {
            background-color: #004bf9;
            width: 100%;
            .odsmain {
                max-width: 120rem;
                min-width: 75rem;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                display: flex;
                margin: 0 auto;
                .odsItem {
                    color: #fff;
                    padding: 5.625rem 0;
                    text-align: center;
                    h1 {
                        font-size: 3.125rem;
                        animation: number-scroll 1s ease-in-out forwards;
                    }
                    h3 {
                        font-size: 1.25rem;
                        padding-top: 0.9375rem;
                    }
                }
                .odsItem:nth-child(2) {
                    margin: 0 18%;
                }
            }
        }
        .oricoPub {
            max-width: 84%;
            background-color: #fff;
            position: relative;
            margin: 0 auto;
            .pubswiper {
                padding-top: 3.5em;
                overflow: hidden;
                .pubSwitem {
                    position: relative;
                    display: flex;
                    width: 31%;
                    height: 100%;
                    background: #ffffff;
                    border-radius: 26px;
                    text-align: center;
                    position: relative;
                    overflow: hidden;
                    max-height: 43.75rem;
                    .pubimgdiv {
                        background-repeat: no-repeat;
                        transition: transform 0.3s ease-in-out;
                        background-size: 100% 100%;
                        max-height: 300px;
                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                            border-radius: 1.625rem;
                            object-fit: cover;
                            vertical-align: middle;
                        }
                    }
                    .pubinfo {
                        position: absolute;
                        left: 5%;
                        bottom: 5%;
                        color: white;
                        width: 90%;
                        font-weight: 600;
                        span {
                            width: 100%;
                            height: 3.75rem;
                            font-size: 1.5rem;
                            display: -webkit-box;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            color: #fff;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            text-wrap: auto;
                        }
                    }
                }
            }
            .pubswiperasd {
                position: relative;
                width: 55%;
                margin-left: 22.5%;
                height: 6rem;
                display: flex;
                .swiper-container {
                    margin: 0;
                    right: 0;
                    width: auto;
                    position: absolute;
                    .slideshow-btn {
                        width: 2.5rem;
                        height: 2.5rem;
                    }
                    .swiper-button-next,
                    .swiper-container-rtl .swiper-button-prev {
                        background-image: none;
                    }
                    .swiper-button-next,
                    .swiper-rtl .swiper-button-prev {
                        margin-left: 4.875rem;
                        margin-top: 1.5625rem;
                        position: static;
                    }
                    .swiper-button-prev,
                    .swiper-rtl .swiper-button-next {
                        position: static;
                        margin-left: 1.75rem;
                        margin-top: -2.5rem;
                    }
                }
            }
        }
        .oricoFQA {
            width: 85%;
            margin: 0 auto;
            margin-top: 4.5rem;
            display: flex;
            flex-direction: row;
            background-color: white;
            border-radius: 1.625rem;
            align-items: baseline;
            box-shadow: 5px 5px 30px 5px #d6d6de;
            .fqaleft {
                width: 40%;
                display: flex;
                flex-direction: column;
                h1.title {
                    font-size: 3.5rem;
                    text-align: left;
                    font-weight: bold;
                    width: 75%;
                    margin-left: 15%;
                    margin-top: 10%;
                    overflow: hidden;
                }
                .dec {
                    font-size: 1.5rem;
                    text-align: left;
                    width: 75%;
                    margin-left: 15%;
                    font-weight: 400;
                    margin-top: 1%;
                    padding: 1% 0;
                    line-height: 1.7rem;
                }
                .sudec {
                    font-size: 1rem;
                    text-align: left;
                    width: 75%;
                    margin-left: 15%;
                    margin-top: 2%;
                    margin-bottom: 10%;
                    line-height: 1.5rem;
                }
            }
            .fqaright {
                width: 60%;
                display: flex;
                margin-bottom: 7%;
                ul.accordion {
                    margin-top: 10%;
                    margin-bottom: auto;
                    margin-left: 3%;
                    width: 90%;
                    border: 1px solid #d6d6d6;
                    border-radius: 0.625rem;
                    display: flex;
                    flex-direction: column;
                    padding: 3% 0;
                    li.fqali {
                        margin-left: 5%;
                        margin-top: 1%;
                        width: 90%;
                        margin-bottom: 0.625rem;
                        border-bottom: 1px solid #d6d6d6;
                        .fqa-question {
                            font-size: 1rem;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 10px;
                            cursor: pointer;
                            overflow: hidden;
                            .xiala {
                                height: 1.875rem;
                                text-align: center;
                            }
                        }
                        .fqa-answer {
                            font-size: 1rem;
                            font-weight: 400;
                            padding: 0.625rem;
                            display: none;
                            p {
                                line-height: 1.75rem;
                            }
                        }
                    }
                    li.fqali:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
        .oricofixd-info {
            height: 88px;
            background-color: #333;
            width: 100%;
            position: fixed;
            bottom: 0;
            z-index: 9999;
            color: white;
            display: flex;
            flex-direction: row;
            align-items: center;
            .ofiinfo {
                width: 80%;
                text-wrap: wrap;
                margin-left: 7%;
                p {
                    font-weight: 400;
                }
            }
            .ofibt {
                width: 10%;
                button {
                    width: 9.375rem;
                    height: 3.125rem;
                    border: 1px solid grey;
                    border-radius: 1.5625rem;
                    color: white;
                    background-color: #333;
                    cursor: pointer;
                }
            }
            .oficlose {
                width: 10%;
                margin-right: 7%;
                .close-btn {
                    font-size: 1.875rem;
                    margin-right: 3.125rem;
                    color: white;
                    cursor: pointer;
                    float: right;
                    width: 1.25rem;
                }
            }
        }
    }
}
